<template>
  <view class="document-details-page">
    <!-- 主标题 -->
    <view class="main-title">{{ fileName }}</view>
    
    <!-- 副标题 -->
    <view class="sub-title">{{ fileName }}:</view>
    
    <!-- 文档缩略图 -->
    <view class="document-thumbnail" v-if="thumbnailUrl">
      <image :src="thumbnailUrl" mode="aspectFit" class="thumbnail-image" @error="onThumbnailError"></image>
    </view>
    
    <!-- 文件信息栏 -->
    <view class="file-info-bar">
      <view class="file-icon" :class="currentFileTypeClass">
        <text class="file-type-text">{{ getFileTypeText(fileExt) }}</text>
      </view>
      <view class="file-name">{{ fileName }}</view>
      <view class="view-file-btn" @click="viewFile">
        <text class="btn-text">查看文件</text>
      </view>
    </view>
    
    <!-- 发布时间和互动信息 -->
    <view class="meta-info">
      <view class="publish-time">发布时间: {{ createTime }}</view>
      <view class="engagement-metrics">
        <view class="metric-item">
          <text class="metric-icon">❤️</text>
          <text class="metric-count">{{ likeCount }}</text>
        </view>
        <view class="metric-item">
          <text class="metric-icon">💬</text>
          <text class="metric-count">{{ commentCount }}</text>
        </view>
      </view>
    </view>

    <!-- 评论区域 -->
    <view class="comments-section">
      <view class="comments-header">
        <view class="red-bar"></view>
        <text class="comments-title">留言</text>
      </view>
      
      <!-- 评论列表 -->
      <view class="comments-list" v-if="comments.length > 0">
        <view class="comment-item" v-for="(comment, index) in comments" :key="index">
          <view class="comment-content">{{ comment.content }}</view>
          <view class="comment-meta">
            <text class="comment-user">{{ comment.userName }}</text>
            <text class="comment-time">{{ comment.createTime }}</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-comments" v-else>
        <view class="empty-icon">📋</view>
        <text class="empty-text">暂无数据</text>
      </view>
    </view>

    <!-- 评论输入框 -->
    <view class="comment-input-section">
      <input 
        class="comment-input" 
        placeholder="请输入评论" 
        v-model="newComment"
        @confirm="submitComment"
      />
      <view class="send-btn" @click="submitComment">
        <text class="send-icon">✈️</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getTechWikiFileDetail } from '@/api/api.js'

export default {
  name: 'DocumentDetails',
  computed: {
    currentFileTypeClass() {
      // 直接调用原函数，传入页面的fileExt变量
      return this.getFileTypeClass(this.fileExt);
    },
    
    // 判断是否为图片文件
    isImageFile() {
      const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
      return imageExts.includes(this.fileExt?.toLowerCase());
    },
    
    // 判断是否为文本文件
    isTextFile() {
      const textExts = ['txt', 'md', 'json', 'xml', 'csv'];
      return textExts.includes(this.fileExt?.toLowerCase());
    },
    
    // 判断是否为Office文件
    isOfficeFile() {
      const officeExts = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'];
      return officeExts.includes(this.fileExt?.toLowerCase());
    }
  },
  data() {
    return {
      documentId: '',
      fileName: '',
      filePath: '',
      fileExt: '',
      typeName: '',
      fileDesc: '',
      fileSize: 0,
      viewCount: 0,
      downloadCount: 0,
      createTime: '',
      documentContent: '',
      textContent: '',
      thumbnailUrl: '',
      likeCount: 0,
      commentCount: 0,
      comments: [],
      newComment: '',
      loading: false
    }
  },
  onLoad(options) {
    this.documentId = options.id || ''
    this.fileName = decodeURIComponent(options.fileName || '')
    this.filePath = decodeURIComponent(options.filePath || '')
    
    // 从文件名提取文件扩展名
    this.fileExt = this.getFileExtension(this.fileName)
    
    this.loadDocumentDetails()
  },
  methods: {
    // 获取文件扩展名
    getFileExtension(fileName) {
      if (!fileName) return ''
      const lastDot = fileName.lastIndexOf('.')
      return lastDot > -1 ? fileName.substring(lastDot + 1) : ''
    },

    // 获取文件类型样式类
    getFileTypeClass(fileExt) {
      const typeMap = {
        'doc': 'file-word',
        'docx': 'file-word',
        'pdf': 'file-pdf',
        'ppt': 'file-ppt',
        'pptx': 'file-ppt',
        'xls': 'file-excel',
        'xlsx': 'file-excel',
        'txt': 'file-text',
        'zip': 'file-zip',
        'rar': 'file-zip'
      }
      return typeMap[fileExt?.toLowerCase()] || 'file-default'
    },

    // 获取文件类型文本
    getFileTypeText(fileExt) {
      const typeMap = {
        'doc': 'W',
        'docx': 'W',
        'pdf': 'PDF',
        'ppt': 'PPT',
        'pptx': 'PPT',
        'xls': 'X',
        'xlsx': 'X',
        'txt': 'T',
        'zip': 'Z',
        'rar': 'R'
      }
      return typeMap[fileExt?.toLowerCase()] || '?'
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (!bytes) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },

    // 加载文档详情
    async loadDocumentDetails() {
      if (!this.documentId) {
        uni.showToast({
          title: '文档ID不能为空',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      try {
        const response = await getTechWikiFileDetail(this.documentId)
        
        if (response.code === 200) {
          const data = response.data
          // 更新页面数据
          this.fileName = data.fileName || this.fileName
          this.filePath = data.filePath || this.filePath
          this.fileExt = data.fileExt || this.fileExt
          this.typeName = data.fileTypeName || '技术文档'
          this.fileDesc = data.fileDesc || ''
          this.fileSize = data.fileSize || 0
          this.viewCount = data.viewCount || 0
          this.downloadCount = data.downloadCount || 0
          this.createTime = data.createTime || ''
          this.likeCount = data.likeCount || 0
          this.commentCount = data.commentCount || 0
          this.thumbnailUrl = data.thumbnailUrl || ''
          
          // 如果有文档内容，显示富文本内容
          if (data.content) {
            this.documentContent = data.content
          }
          
          // 如果是文本文件，加载文本内容
          if (this.isTextFile && this.filePath) {
            this.loadTextContent()
          }
          
          // 加载评论数据
          this.loadComments()
        } else {
          uni.showToast({
            title: response.message || '加载文档详情失败',
            icon: 'none'
          })
        }
        
      } catch (error) {
        console.error('加载文档详情失败:', error)
        uni.showToast({
          title: '加载文档详情失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 获取PDF查看器URL
    getPdfViewerUrl() {
      // 使用在线PDF查看器
      const pdfViewerUrl = 'https://mozilla.github.io/pdf.js/web/viewer.html';
      return `${pdfViewerUrl}?file=${encodeURIComponent(this.filePath)}`;
    },
    
    // 加载文本内容
    async loadTextContent() {
      try {
        const response = await uni.request({
          url: this.filePath,
          method: 'GET'
        });
        
        if (response.statusCode === 200) {
          this.textContent = response.data;
          return Promise.resolve();
        } else {
          console.error('加载文本内容失败:', response);
          return Promise.reject(new Error('加载失败'));
        }
      } catch (error) {
        console.error('加载文本内容失败:', error);
        return Promise.reject(error);
      }
    },
    
    // 图片加载错误处理
    onImageError(e) {
      console.error('图片加载失败:', e);
      uni.showToast({
        title: '图片加载失败',
        icon: 'none'
      });
    },
    
    // 缩略图加载错误处理
    onThumbnailError(e) {
      console.error('缩略图加载失败:', e);
      this.thumbnailUrl = '';
    },
    
    // 查看文件
    viewFile() {
      if (!this.filePath) {
        uni.showToast({
          title: '文件不存在',
          icon: 'none'
        });
        return;
      }
      
      // 显示操作选项
      uni.showActionSheet({
        itemList: ['预览文件', '下载文件'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 预览文件
            this.previewFile();
          } else if (res.tapIndex === 1) {
            // 下载文件
            this.downloadDocument();
          }
        }
      });
    },
    
    // 预览文件
    previewFile() {
      if (!this.filePath) {
        uni.showToast({
          title: '文件不存在',
          icon: 'none'
        });
        return;
      }
      
      
      // 根据文件类型选择不同的预览方式
      if (this.fileExt.toLowerCase() === 'pdf') {
        this.previewPdf();
      } else if (this.isImageFile) {
        this.previewImage();
      } else if (this.isTextFile) {
        this.previewText();
      } else if (this.isOfficeFile) {
        this.previewOffice();
      } else {
        // 其他文件类型，提示下载
        uni.showModal({
          title: '文件预览',
          content: '此文件类型不支持在线预览，是否下载后查看？',
          success: (res) => {
            if (res.confirm) {
              this.downloadDocument();
            }
          }
        });
      }
    },
    
    // 预览PDF
    previewPdf() {
      
      // 检查文件URL是否有效
      if (!this.filePath || !this.filePath.startsWith('http')) {
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      // #ifdef H5
      // H5环境直接在新窗口打开PDF
      window.open(this.filePath, '_blank');
      uni.showToast({
        title: 'PDF已在新窗口打开',
        icon: 'success'
      });
      // #endif
      
      // #ifdef MP-WEIXIN
      // 微信小程序使用web-view
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(this.filePath)}&title=${encodeURIComponent(this.fileName)}`
      });
      // #endif
      
      // #ifdef APP-PLUS
      // App环境使用内置浏览器
      plus.runtime.openURL(this.filePath, {}, (err) => {
        if (err) {
          console.error('打开PDF失败:', err);
          uni.showToast({
            title: '无法打开PDF文件',
            icon: 'none'
          });
        }
      });
      // #endif
    },
    
    // 预览图片
    previewImage() {
      // 检查文件URL是否有效
      if (!this.filePath || !this.filePath.startsWith('http')) {
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      uni.previewImage({
        urls: [this.filePath],
        current: this.filePath,
        success: () => {
        },
        fail: (err) => {
          console.error('图片预览失败:', err);
          uni.showToast({
            title: '图片预览失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 预览文本文件
    previewText() {
      
      // 检查文件URL是否有效
      if (!this.filePath || !this.filePath.startsWith('http')) {
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到文本预览页面
      uni.navigateTo({
        url: `/pages/textview/textview?url=${encodeURIComponent(this.filePath)}&title=${encodeURIComponent(this.fileName)}`
      });
    },
    
    // 预览Office文件
    previewOffice() {
      
      // 检查文件URL是否有效
      if (!this.filePath || !this.filePath.startsWith('http')) {
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      // #ifdef H5
      // H5环境使用在线Office预览
      const officeViewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(this.filePath)}`;
      window.open(officeViewerUrl, '_blank');
      uni.showToast({
        title: 'Office文件已在新窗口打开',
        icon: 'success'
      });
      // #endif
      
      // #ifdef MP-WEIXIN
      // 微信小程序使用web-view
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(officeViewerUrl)}&title=${encodeURIComponent(this.fileName)}`
      });
      // #endif
      
      // #ifdef APP-PLUS
      // App环境使用内置浏览器
      plus.runtime.openURL(this.filePath, {}, (err) => {
        if (err) {
          console.error('打开Office文件失败:', err);
          uni.showToast({
            title: '无法打开Office文件',
            icon: 'none'
          });
        }
      });
      // #endif
    },
    
    // 显示下载选项
    showDownloadOptions() {
      uni.showActionSheet({
        itemList: ['下载文件', '复制链接'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.downloadDocument();
          } else if (res.tapIndex === 1) {
            this.copyFileLink();
          }
        }
      });
    },
    
    // 复制文件链接
    copyFileLink() {
      // #ifdef H5
      if (navigator.clipboard) {
        navigator.clipboard.writeText(this.filePath).then(() => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          });
        });
      } else {
        // 降级方案
        const textArea = document.createElement('textarea');
        textArea.value = this.filePath;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        uni.showToast({
          title: '链接已复制',
          icon: 'success'
        });
      }
      // #endif
      
      // #ifndef H5
      uni.setClipboardData({
        data: this.filePath,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          });
        }
      });
      // #endif
    },
       
    // 提交评论
    async submitComment() {
      if (!this.newComment.trim()) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 这里应该调用提交评论的API
        // const response = await submitComment({
        //   documentId: this.documentId,
        //   content: this.newComment
        // });
        
        // 模拟提交成功
        const newComment = {
          content: this.newComment,
          userName: '当前用户',
          createTime: new Date().toLocaleString()
        };
        
        this.comments.push(newComment);
        this.commentCount++;
        this.newComment = '';
        
        uni.showToast({
          title: '评论成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('提交评论失败:', error);
        uni.showToast({
          title: '评论失败',
          icon: 'none'
        });
      }
    },

    // 下载文档
    downloadDocument() {
      
      if (!this.filePath) {
        uni.showToast({
          title: '文件链接不存在',
          icon: 'none'
        })
        return
      }
      
      // 显示下载确认对话框
      uni.showModal({
        title: '下载文件',
        content: `确定要下载文件"${this.fileName}"吗？`,
        success: (res) => {
          if (res.confirm) {
            this.startDownload();
          }
        }
      });
    },
    
    // 开始下载
    startDownload() {
      // 检查文件URL是否有效
      if (!this.filePath || !this.filePath.startsWith('http')) {
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      // 显示下载进度
      uni.showLoading({
        title: '正在下载...'
      });
      
      // 检查运行环境
      // #ifdef H5
      // H5环境下使用浏览器原生下载
      this.downloadInH5()
      // #endif
      
      // #ifndef H5
      // 非H5环境使用uni.downloadFile
      this.downloadInApp()
      // #endif
    },
    
    // H5环境下的下载方法
    downloadInH5() {
      try {
        
        // 检查文件URL是否有效
        if (!this.filePath.startsWith('http')) {
          uni.hideLoading();
          uni.showToast({
            title: '文件链接无效',
            icon: 'none'
          });
          return;
        }
        
        // 创建一个临时的a标签来触发下载
        const link = document.createElement('a')
        link.href = this.filePath
        link.download = this.fileName || 'document'
        link.target = '_blank'
        
        // 添加到DOM并触发点击
        document.body.appendChild(link)
        link.click()
        
        // 清理DOM
        document.body.removeChild(link)
        
        uni.hideLoading();
        uni.showToast({
          title: '下载已开始',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('H5下载失败:', error)
        uni.hideLoading();
        uni.showToast({
          title: '下载失败',
          icon: 'none'
        })
      }
    },
    
    // App环境下的下载方法
    downloadInApp() {
      
      // 检查文件URL是否有效
      if (!this.filePath.startsWith('http')) {
        uni.hideLoading();
        uni.showToast({
          title: '文件链接无效',
          icon: 'none'
        });
        return;
      }
      
      // 使用uni.downloadFile下载文件
      uni.downloadFile({
        url: this.filePath,
        success: (res) => {
          uni.hideLoading()
          
          if (res.statusCode === 200) {
            // 下载成功，保存到本地
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: (saveRes) => {
                uni.showToast({
                  title: '下载成功',
                  icon: 'success'
                })
                
                // 更新下载计数
                this.downloadCount++;
                
                // 询问是否打开文件
                uni.showModal({
                  title: '下载完成',
                  content: '文件已保存到本地，是否立即打开？',
                  success: (modalRes) => {
                    if (modalRes.confirm) {
                      this.openDownloadedFile(saveRes.savedFilePath);
                    }
                  }
                });
              },
              fail: (saveErr) => {
                console.error('保存文件失败:', saveErr)
                uni.showToast({
                  title: '保存文件失败',
                  icon: 'none'
                })
              }
            })
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('下载文件失败:', err)
          uni.hideLoading()
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 打开已下载的文件
    openDownloadedFile(filePath) {
      // #ifdef APP-PLUS
      // App环境使用系统应用打开文件
      plus.runtime.openFile(filePath, {}, (err) => {
        console.error('打开文件失败:', err);
        uni.showToast({
          title: '无法打开文件',
          icon: 'none'
        });
      });
      // #endif
      
      // #ifdef MP-WEIXIN
      // 微信小程序环境
      uni.showToast({
        title: '文件已保存',
        icon: 'success'
      });
      // #endif
    }
  }
}
</script>

<style scoped>
.document-details-page {
  background-color: #FFFFFF;
  min-height: 100vh;
  padding: 32rpx;
}

/* 主标题 */
.main-title {
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
  margin-bottom: 16rpx;
}

/* 副标题 */
.sub-title {
  font-size: 32rpx;
  color: #000000;
  font-weight: normal;
  margin-bottom: 20rpx;
}

/* 文档缩略图 */
.document-thumbnail {
  margin-bottom: 20rpx;
}

.thumbnail-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

/* 文件信息栏 */
.file-info-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #F8F8F8;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.file-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.file-word {
  background-color: #2196F3;
}

.file-pdf {
  background-color: #F44336;
}

.file-ppt {
  background-color: #FF9800;
}

.file-excel {
  background-color: #4CAF50;
}

.file-text {
  background-color: #607D8B;
}

.file-zip {
  background-color: #795548;
}

.file-default {
  background-color: #9E9E9E;
}

.file-type-text {
  color: #FFFFFF;
  font-size: 24rpx;
  font-weight: bold;
}

.file-name {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  margin-right: 20rpx;
}

.view-file-btn {
  padding: 12rpx 24rpx;
  border: 2rpx solid #FF8800;
  border-radius: 6rpx;
}

.btn-text {
  font-size: 24rpx;
  color: #FF8800;
  font-weight: bold;
}

/* 发布时间和互动信息 */
.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.publish-time {
  font-size: 24rpx;
  color: #666666;
}

.engagement-metrics {
  display: flex;
  gap: 20rpx;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.metric-icon {
  font-size: 24rpx;
}

.metric-count {
  font-size: 24rpx;
  color: #666666;
}

/* 评论区域 */
.comments-section {
  margin-bottom: 40rpx;
}

.comments-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.red-bar {
  width: 6rpx;
  height: 32rpx;
  background-color: #FF0000;
  margin-right: 12rpx;
}

.comments-title {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
}

/* 评论列表 */
.comments-list {
  margin-bottom: 20rpx;
}

.comment-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-content {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.5;
  margin-bottom: 12rpx;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999999;
}

/* 空状态 */
.empty-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  color: #CCCCCC;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

/* 评论输入框 */
.comment-input-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  padding: 20rpx 32rpx;
  border-top: 1rpx solid #F0F0F0;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.comment-input {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  background-color: #F8F8F8;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #333333;
}

.send-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #FF8800;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-icon {
  font-size: 24rpx;
  color: #FFFFFF;
}

/* 加载状态 */
.loading {
  padding: 80rpx 32rpx;
  text-align: center;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}
</style>